(($) => {
  class DOM {
    constructor(ops) {
      for (let n in ops) {
        switch (n) {
          case "template":
            const res = ops[n]();
            this.template =
              typeof res === "string"
                ? document.querySelector(res).content
                : res;
            break;
          default:
            this[n] = { ...ops[n] };
            break;
        }
      }
      return this;
    }
    methods = {};
    component(name, ops) {
      $.customElements.define(name, ops);
      return this;
    }
    use(fn) {
      fn(this);
      return this;
    }
    render(id) {
      this.template &&
        document.querySelector(id).append(this.template.cloneNode(true));
      return this;
    }
  }
  $.DOM = DOM;
})(window);
